<template>
	<view>
		<uni-forms
			:modelValue="formData"
			@keyup.enter="submitForm"
			ref="formRef"
			:rules="formRules"
		>
			<uni-forms-item label="姓名" name="name" required class="form-item">
				<uni-easyinput
					class="form-item"
					type="text"
					v-model="formData.name"
					placeholder="请输入姓名"
				/>
			</uni-forms-item>
			<uni-forms-item label="年龄" name="age">
				<uni-easyinput
					@keyup.enter="submitForm"
					type="text"
					v-model="formData.age"
					placeholder="请输入年龄"
				/>
			</uni-forms-item>
		</uni-forms>
		<button @click="submitForm" @keyup="keyupHandle">Submit</button>
		<button form-type="reset" type="primary" plain @click="Resethandle">
			Reset
		</button>

		<!-- #ifdef MP-WEIXIN -->
		<view class="">这段代码只会打包在小程序平台</view>
		<!-- #endif -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				name: 'kaki',
				age: 22
			},

			formRules: {
				name: {
					rules: [
						{
							required: true,
							errorMessage: '请输入姓名'
						},
						{
							minLength: 3,
							maxLength: 5,
							errorMessage:
								'姓名长度在 {minLength} 到 {maxLength} 个字符'
						}
					]
				},
				age: {
					rules: [
						{
							// format: number,
							required: true,
							errorMessage: '请输入年龄'
						},
						{
							minLength: 1,
							maxLength: 2,
							errorMessage: '您的年龄过大'
						}
					]
				}
			}
		};
	},
	methods: {
		submitForm: function() {
			this.$refs.formRef
				.validate()
				.then(res => {
					console.log('表单数据信息：', res);
				})
				.catch(err => {
					console.log('表单错误信息：', err);
				});
		},

		Resethandle() {
			this.formData.name = null;
			this.formData.age = null;
		}
	}
};
</script>

<style lang="scss">
//重写组件的样式需要加important,需要在调试器找到样式名称
.uni-forms-item:first-of-type .uni-forms-item__label {
	color: hotpink !important;
	padding-left: 15rpx !important;
}

//css穿透用的比较多
// :deep(.uni-forms-item__label){
// 	color: hotpink;
// }
</style>
